<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>优永动助手 - 找回密码</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script type="text/javascript" src="/layui/layui.all.js"></script>
    <link rel="stylesheet" href="/css/blog.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.0/jquery.cookie.js"></script>
    <style>
        .findpass-btn {
            height: 100px;
            width: 100%;
            font-size: 42px;
            margin-top: 50px;
            background-color: green;
        }

        input {
            font-size: 38px;
        }

        .zhuce-item {
            font-size: 46px;
            font-family: "Microsoft YaHei UI";
        }

        .zhuce-item-input {
            margin-top: 10px;
            margin-bottom: 30px;
        }

        .foot-login-tip {
            margin-top: 60px;
            font-size: 36px;
        }

        .regtip {
            color: red;
            font-size: 36px;
            padding-bottom: 20px;
        }
        #phonecodebtn{
            height: 70px;
            font-size: 28px;
            background-color: #00b900;
        }




    </style>
</head>
<body>

<div class="layui-row search-main log-title">

    <div class="layui-col-xs2" onclick="history.go(-1)">
        <i class="layui-icon layui-icon-left return-btn"></i>
    </div>

    <div class="layui-col-xs4 layui-col-xs-offset2">找回密码</div>

</div>
<div class="layui-row blog-main">
    <form id="findpassForm" action="/findpass" method="post">
        <div class="layui-row zhuce-item">
            用户名：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="text" name="username" autocomplete="off" placeholder="请输入用户名6-12位" class="layui-input">
        </div>

        <div class="layui-row zhuce-item">
            手机号<span style="font-size: 24px;color: grey;">(加上地区号，例如中国+8615012345678)</span>
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="text" name="phone" autocomplete="off" placeholder="加上地区号，例如中国+8615012345678" maxlength="20"
                   class="layui-input">
        </div>
        <div class="layui-row zhuce-item">
            手机号验证码：
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <input class="layui-input" type="text" name="phonecode" id="phonecode" placeholder="手机号验证码"
                       maxlength="6">
            </div>
            <div class="layui-col-xs6">
                <input type="button" id="phonecodebtn" class="btn btn-info" value="获取手机验证码">
            </div>
        </div>


        <div class="layui-row regtip" th:text="'提示:'+${findpasstip}==null?'':${findpasstip}">
        </div>

        <div class="layui-row zhuce-item">
            新密码：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="password" name="loginpass" autocomplete="off" placeholder="请输入登录密码" class="layui-input">
        </div>

        <div class="layui-row zhuce-item">
            确认密码：
        </div>
        <div class="layui-row zhuce-item-input">
            <input type="password" name="password2" autocomplete="off" placeholder="再次输入密码" class="layui-input">
        </div>

        <div class="layui-row">
            <div class="layui-col-xs8 layui-col-xs-offset2">
                <button type="button" class="layui-btn layui-btn-normal findpass-btn">重置密码</button>
            </div>

        </div>
    </form>

    <div class="layui-row">
        <div class="layui-col-xs8 layui-col-xs-offset2 foot-login-tip">
            想起来了？ <a style="color: green" href="/login">我要登录</a>
        </div>

    </div>

</div>

</div>

<script>
    $(function () {
        $(".findpass-btn").click(function () {
            var sub = validate();
            if (sub == false) {
                return false;
            }
            $("#findpassForm").submit();

        });
    });


    function validate() {
        var username = $("input[name=username]").val();
        if (username == '' || username == null) {
            alert("用户名不可为空");

            return false;
        }

        var phone = $("input[name=phone]").val();
        if (phone == '' || phone == null) {

            alert("手机不可为空");

            return false;
        }
        var phonecode = $("input[name=phonecode]").val();
        if (phonecode == '' || phonecode == null) {

            alert("短信不可为空");

            return false;
        }
        var loginpass = $("input[name=loginpass]").val();
        if (loginpass == '' || loginpass == null) {

            alert("密码不可为空");

            return false;
        }
        var password2 = $("input[name=password2]").val();
        if (password2 == '' || password2 == null) {

            alert("确认密码不可为空");

            return false;
        }

        if (loginpass != password2) {
            alert("两次密码不一样");
            return false;
        }
    }


    function getCode(phone, type) {

        $.ajax({
            //请求方式
            type: "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "/getCode?phone=" + phone + "&type=" + type,
            //数据，json字符串
            data: {},
            //请求成功
            success: function (result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
    }


    $(function () {

        /*仿刷新：检测是否存在cookie*/

        if ($.cookie("captcha")) {

            var count = $.cookie("captcha");

            var btn = $('#phonecodebtn');

            btn.val(count + '秒后可重新获取').attr('disabled', true).css('cursor', 'not-allowed');

            var resend = setInterval(function () {

                count--;

                if (count > 0) {

                    btn.val(count + '秒后可重新获取').attr('disabled', true).css('cursor', 'not-allowed');

                    $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});

                } else {

                    clearInterval(resend);

                    btn.val("获取验证码").removeClass('disabled').removeAttr('disabled style');

                }

            }, 1000);

        }


        /*点击改变按钮状态，已经简略掉ajax发送短信验证的代码*/

        $("#phonecodebtn").click(function () {

            //发送验证码
            var phone = $("input[name=phone]").val();
            if (phone == '' || phone == null) {
                alert("请输入手机号");
                return false;
            }
            getCode(phone, 'phone');

            var btn = $(this);

            var count = 60;

            var resend = setInterval(function () {

                count--;

                if (count > 0) {

                    btn.val(count + "秒后可重新获取");

                    $.cookie("captcha", count, {path: '/', expires: (1 / 86400) * count});

                } else {

                    clearInterval(resend);

                    btn.val("获取手机验证码").removeAttr('disabled style');

                }

            }, 1000);

            btn.attr('disabled', true).css('cursor', 'not-allowed');

        });


    });
</script>
</body>
</html>